<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
    append-to-body
  >
    <div>
      <div class="header">
        <div class="headerBox">
          <div class="headerTit">原材类型：全部改为</div>
          <el-radio-group v-model="radio" style="height: 12px">
            <el-radio :label="1">线材</el-radio>
            <el-radio :label="2">棒材</el-radio>
          </el-radio-group>
        </div>
        <!-- <div class="headerBox">
          <div class="headerTit">弯曲延伸设置：</div>
          <el-button size="small" @click="deduction">立即扣减</el-button>
          <el-button size="small" @click="eliminate">清除</el-button>
          <el-button size="small" type="primary" @click="setUp">设置</el-button>
        </div> -->
      </div>

      <el-table class="tableSty" :data="tableData">
        <el-table-column label="编号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="规格直径" align="center">
        </el-table-column>
        <el-table-column prop="province" label="钢筋简图" align="center">
        </el-table-column>
        <el-table-column label="原材类型" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type" placeholder="请选择">
              <el-option label="类型1" :value="1"> </el-option>
              <el-option label="类型2" :value="2"> </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="单根长度(mm)" align="center">
          <template slot-scope="scope">
            <el-input-number style="width: 100%;" v-model="scope.row.number" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="根数" align="center">
          <template slot-scope="scope">
            <el-input-number style="width: 100%;" v-model="scope.row.address" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="总根数" align="center">
        </el-table-column>
        <el-table-column label="设计重量(kg)" align="center">
          <template slot-scope="scope">
            <el-input-number style="width: 100%;" v-model="scope.row.zip" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="总重量(kg)" align="center">
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <el-input v-if="scope.row.showRemarks" v-model="scope.row.remarks" placeholder="请输入内容" @blur="blurInput(scope.row)"></el-input>
              <div v-if="!scope.row.showRemarks" style="margin-right: 10px;">{{ scope.row.remarks }}</div>
              <i v-if="!scope.row.showRemarks" @click="clickIcon(scope.row)" style="font-size: 18px;color: #3994fb;" class="el-icon-edit"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
    
    <underReview-setUp ref="underReviewSetUp" />
  </el-dialog>
</template>

<script>
import underReviewSetUp from './underReview-setUp.vue'
export default {
  name: "",
  components: {
    underReviewSetUp
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: "",

      radio: 1,

      tableData: [
        {
          type: 1,
          name: "2",
          province: "3",
          city: "4",
          number: 4,
          address: "3410",
          zip: 6,
          showRemarks: false,
          remarks: '备注'
        },
        {
          type: 1,
          name: "2",
          province: "3",
          city: "4",
          number: 4,
          address: "3410",
          zip: 6,
          showRemarks: false,
          remarks: '备注'
        },
        {
          type: 1,
          name: "2",
          province: "3",
          city: "4",
          number: 4,
          address: "3410",
          zip: 6,
          showRemarks: false,
          remarks: '备注'
        },
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    edit() {
      this.dialogVisible = true;
      this.title = "料单编辑";
    },
    deduction() {
      console.log("立即扣减");
    },
    eliminate() {
      console.log("清除");
    },
    setUp() {
      console.log("设置");
      this.$refs.underReviewSetUp.setUp()
    },
    clickIcon(val) {
      console.log(val)
      val.showRemarks = true
    },
    blurInput(val) {
      console.log(val)
      val.showRemarks = false
    },
    submitForm() {
      console.log(this.tableData)
    },
    handleClose(done) {
      this.$modal
        .confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .headerBox {
    display: flex;
    align-items: center;
    .headerTit {
      font-weight: 400;
      font-size: 14px;
      color: #101010;
      margin-right: 20px;
    }
  }
}
.tableSty {
  width: 100%;
  margin-top: 20px;
}
</style>
